<template>
  <div>
    <Echart
      :options="options"
      id="foldLine"
      key="foldLine"
      ref="foldLine"
      height="200px"
      width="100%"
    ></Echart>
  </div>
</template>
        
<script>
import Echart from "@/common/echart";
export default {
  props: {
    caseType: {
      type: Number,
      default: 0,
    },
    DataDM: {
      // X轴
      type: Array,
      default: () => [],
    },
    DataA: {
      // Y轴
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
    // mapDialog
  },

  watch: {
    caseType() {
      this.$nextTick(() => {
        this.initOptions();
      });
    },
  },
  created() {
    this.initOptions();
  },
  mounted() {},
  methods: {
    initOptions() {
      let DataName = [];
      let DataColor = [];
      let DataName1 = ["卷烟案值"];
      let DataName2 = ["电子烟案值"];
      let DataColor1 = ["#7FFDFF"];
      let DataColor2 = ["#7FFDFF"];
      // let DataColor2 = ["#61EBAC"];
      let DataA = this.DataA;
      let DataDM = this.DataDM;
      let sortArr = DataA.sort((a, b) => a - b);
      let valRange = [
        sortArr[0].toFixed(0),
        sortArr[sortArr.length - 1].toFixed(0),
      ];
      // let maxVal = 300000000;
      // let valRange = !this.caseType
      //   ? [50000000, 300000000]
      //   : [5000000, 50000000];
      if (this.caseType == 0) {
        DataName = DataName1;
        DataColor = DataColor1;
      } else {
        DataName = DataName2;
        DataColor = DataColor2;
      }

      this.options = {
        // backgroundColor: "#344b58",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            textStyle: {
              color: "#fff",
            },
          },
          formatter: function (parms) {
            let data = parms[0];
            let str = `${data.seriesName}： ${data.data}万元`;
            return str;
          },
          //backgroundColor: 'rgba(0,0,0,0.7)', //提示背景
        },
        grid: {
          top: "22%",
          left: "15%",
          right: "5%",
          bottom: "20%",
        },

        // legend: {
        //   align: "left",
        //   right: "5%",
        //   left: "35%",
        //   top: "0%",
        //   textStyle: {
        //     color: "#666",
        //     fontSize: 12,
        //   },
        //   icon: "pin",
        //   // itemGap: 25,
        //   itemWidth: 20,
        //   itemHeight: 5,
        //   data: DataName,
        // },
        xAxis: [
          {
            type: "category",
            data: DataDM,
            axisPointer: {
              type: "shadow",
            },
            // boundaryGap: false, //让x轴坐标从紧挨着y轴开始
            // 坐标轴线
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.7)", //X轴字体颜色
                fontSize: "12",
              },
            },
            axisTick: {
              show: false, //去掉图表横纵坐标轴刻度线
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "solid",
                color: "rgba(66, 164, 255, 0.3)",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：万元",
            nameTextStyle: {
              color: "rgba(255, 255, 255, 0.5)",
              fontSize: 12,
            },

            min: valRange[0],
            max: valRange[1],
            // interval: 50,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "rgba(255,255,255,0.7)", //Y轴内容文字颜色
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(66, 164, 255, 0.3)", //y轴
                type: "solid",
                // fontSize: '12',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
                color: "rgba(66, 164, 255, 0.3)", //里面横着的虚线
              },
            },
          },
        ],
        series: [
          {
            name: DataName[0],
            type: "line",
            areaStyle: {
              color: {
                type: "linear",
                colorStops: [
                  {
                    offset: 0,
                    color: "#1f6289",
                  },
                  {
                    offset: 1,
                    color: "#074274",
                  },
                ],
              },
            },
            showAllSymbol: true,
            symbolSize: 8,
            symbol: "circle",
            smooth: true,
            lineStyle: {
              normal: {
                width: 1,
                color: DataColor[0],
              },
              // borderColor: "rgba(0,0,0,.4)",
            },
            itemStyle: {
              color: DataColor[0],
            },
            tooltip: {
              show: true,
            },
            data: DataA,
          },
        ],
      };
    },
  },
  mounted() {
    this.initOptions();
  },
};
</script>
        
    <style lang="scss" scoped>
</style>
        